<template>
  <div>
    <van-cell class="article-item" :to="`/article/${item.art_id}`">
      <template #title>
        <span class="custom-title">{{ item.title }}</span>
      </template>
      <template #label>
        <div class="art_itemlabel">
          <div class="labelimgs" v-if="item.cover.type === 3">
            <van-image
              v-for="(img, index) in item.cover.images"
              :key="index"
              class="imgs"
              :src="img"
              lazy-load
            />
          </div>
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ item.pubdate | yearsage }}</span>
        </div>
      </template>
      <template v-if="item.cover.type === 1" #default>
        <van-image lazy-load class="imgs" :src="item.cover.images[0]" />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.article-item {
  margin-top: 3px;
  border-top: 1px solid skyblue;
  font-size: 35px;
  .art_itemlabel {
    span {
      margin-right: 15px;
    }
    .labelimgs {
      display: flex;
      padding: 30px 0;
      justify-content: space-between;
    }
  }
  .imgs {
    width: 200px;
    height: 160px;
  }
  .van-cell__value {
    display: flex;
    // 去除flex
    flex: unset;
    align-items: center;
  }
  .van-cell__title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
